import React from 'react';
import { observer, inject } from 'mobx-react';
import { Icon, TabBar, Tools, Popover } from 'weaver-mobile';
import { DocumentTitle } from "weaver-mobile-page";
import { withRouter } from 'react-router-dom';

const Item = Popover.Item;
const getLabel = Tools.getLabel;


@withRouter
@observer
export default class Main extends React.Component {
  constructor(props) {
    super(props);
    this.getKey = this.getKey.bind(this);
    this.state = {
      popVisible: false
    }
  }

  render() {
    const { location: { pathname } } = this.props
    const selectedKey = this.getKey(pathname);
    //let moreSelected = '';
    const data = [
      { title: getLabel(384730, "公文中心"), icon: "public-library", key: "docCenter" },
      { title: getLabel(383001, "公文库"), icon: "document-library", key: "docLibrary" },
      { title: getLabel(384728, '待办公文'), icon: "waiting-office", key: "docTodo" },
      { title: getLabel(383653, '公文台账'), icon: "cooperation-examination-and-approval-hot", key: "docLedger" },
      // { title: getLabel(384731, '公文报表'), icon: "document-report", key: "docReport" },
      // { title: getLabel(515700, '内部交换'), icon: "change", key: "docExchange" },
      { title: getLabel(17499, '更多'), icon: "ellipsis", key: "moreTabs" },
    ];
    const datas = [
      { match: /^\/docCenter/i, title: () => Tools.getLabel(384730, "公文中心") },
      { match: /^\/docLibrary/i, title: () => Tools.getLabel(383001, "公文库") },
      { match: /^\/docToDo/i, title: () => Tools.getLabel(384728, '待办公文') },
      { match: /^\/docLedger/i, title: () => Tools.getLabel(383653, '公文台账') },
      { match: /^\/docReport/i, title: () => Tools.getLabel(384731, '公文报表') },
      { match: /^\/docExchange/i, title: () => Tools.getLabel(515700, '内部交换') },
      { match: /^\/odoc\/noDocument/i, title: () => Tools.getLabel('', '尚无正文') },
    ];
    // if (selectedKey == 'docReport' || selectedKey == 'docExchange') {
    //   moreSelected = 'moreTabs';
    // }
    const regexp = /^\/odoc\//i
    const canShowTab = regexp.test(pathname)
    return (
      <div className="doc-bar">
        <DocumentTitle data={datas} defaultTitle="" />
        {!canShowTab &&
          <TabBar>
          {
            data.map(item => {
              return (
                <TabBar.Item
                  title={item.title}
                  key={item.key}
                  icon={item.key == "moreTabs" ?
                    <Popover mask
                      overlayClassName="fortest"
                      overlayStyle={{ color: 'currentColor' }}
                      visible={this.state.popVisible}
                      placement="topRight"
                      overlay={[
                        (<Item key="docReport" value="scan" data-seed="logId">{getLabel(384731, '公文报表')}</Item>),
                        (<Item key="docExchange" value="special" style={{ whiteSpace: 'nowrap' }}>{getLabel(515700, '内部交换')}</Item>),
                      ]}
                      align={{
                        overflow: { adjustY: 0, adjustX: 0 },
                        offset: [-10, -10],
                      }}
                      onVisibleChange={this.handleVisibleChange}
                      onSelect={this.onSelect}
                    >
                      <div style={{
                        height: '100%',
                        padding: '0 15px',
                        // marginRight: '-15px',
                        display: 'flex',
                        alignItems: 'cssenter',
                      }}
                      >
                        <Icon type="ellipsis" />
                      </div>
                    </Popover>
                    :
                    <Icon type={item.icon} />}
                  selectedIcon={<Icon type={item.icon} />}
                  // selected={ moreSelected ? moreSelected === item.key : selectedKey === item.key}
                  selected={selectedKey === item.key}
                  onPress={() => {
                    if (item.key == "moreTabs") {
                      this.setState({
                        popVisible: true
                      })
                    } else {
                      this.setState({
                        popVisible: false,
                      })
                      this.props.history.push(`/${item.key}`)
                    }
                  }}
                />
              )
            })
          }

        </TabBar>}
        <div style={{ height: 'calc(100% - 50px)' }}>
          {this.props.children}
        </div>
      </div>
    );
  }

  getKey(path) {
    let key = "";
    if (path.indexOf("docCenter") > -1) key = "docCenter";
    if (path.indexOf("docLibrary") > -1) key = "docLibrary";
    if (path.indexOf("docTodo") > -1) key = "docTodo";
    if (path.indexOf("docLedger") > -1) key = "docLedger";
    if (path.indexOf("docReport") > -1) key = "docReport";
    if (path.indexOf("docExchange") > -1) key = "docExchange";
    return key;
  }

  handleVisibleChange = (visible) => {
    this.setState({
      popVisible: visible,
    });
  }

  onSelect = (node) => {
    // console.log(node.key);
    this.props.history.push(`/${node.key}`);
    this.setState({
      popVisible: false
    })
  }
}